<template>
	<view>
		<view class="fixedit" :style="{top:top}">
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
				<view v-for="(cate, index) in categories" :key="index" :data-cateid="cate.cateid" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
				 @tap="tabChange">{{cate.name}}</view>
			</scroll-view>
		</view>
		<view style="height:40px;"></view>
		<!-- 动态列表 -->
		<view v-if="cateCurrentIndex==0">
			<view v-for="(item, index) in socialMain" :key="index">
				<view class="grace-news-list" style="padding:10upx 25upx; width:700upx;" @click="goSocialDetail(item.id)">
					<view class="social-banner" >
						<view class="social-banner-img" @click.stop="goHomePage(item.memberId,item.memberCertification)">
							<image :src="(item.avatarImg==null||item.avatarImg=='')?'../../../static/user.png':serverUrl+item.avatarImg" mode="widthFix"></image>
						</view>	

						<view class="social-banner-text">
							<text class="text-nickname" @click.stop="goHomePage(item.memberId,item.memberCertification)">
								{{item.author}}
							</text>
							<block v-if="item.memberCertification==1">
								<image src="../../../static/v.png" style="width: 35upx; height: 35upx;" />
							</block>
							<view class="text-description">
								<text>{{item.timehour}} {{item.place}}</text>
							</view>
						</view>
					</view>
					<view class="grace-news-list-img-news">
						<view class="grace-news-list-title-main">
							<text @click.stop="goTopicDetail(item.topicId)" class="main-topic">{{item.topicTitle}}</text>
							<label>{{item.content}}</label>
						</view>

						<!-- <view :class="item.images.length==1?'grace-news-list-img-big':(item.images.length==2?'grace-news-list-two':'grace-news-list-imgs')"> -->
						<view class="grace-news-list-two">
							<block v-for="(image,k) in item.images" :key="k">
								<image :v-if="image!=''" :src="serverUrl+image" :data-src="serverUrl+image" :data-index="index" 
								@click.stop="previewImage" mode="widthFix"></image>
							</block>
						</view>
						<!-- 资源卡片 -->
						<view v-if="item.resource!=undefined" class="grace-news-list-items" style="width:94%; padding:5px 3%;" @click.stop="goShareDetail(item.resource.data[0].type[0],item.resource.data[0].id[0],item.resource.data[0].title[0])">
							<image :src="item.resource.data[0].cover[0]==null||item.resource.data[0].cover[0]==''?'../../../static/l2.png':serverUrl+item.resource.data[0].cover[0]" class="grace-news-list-img grace-list-imgs-l" mode="widthFix"></image>
							<view class="grace-news-list-title">
								<view class="grace-news-list-title-main">{{item.resource.data[0].title[0]}}</view>
								<text class="grace-news-list-title-desc grace-text-overflow">{{item.resource.data[0].author[0]}} {{item.resource.data[0].create_time_str[0]}}</text>
							</view>
						</view>
					</view>

					<view class="grace-rows">
						<view class="grace-items grace-rows-li grace-center">
							<image src="../../../static/zhuanfa.png" mode="widthFix"></image>
							<text class="li-text">转发</text>
						</view>
						<view class="grace-items grace-rows-li grace-center"  @click.stop="goSocialDetail(item.id)">
							<image src="../../../static/pinglun.png" mode="widthFix"></image>
							<text class="li-text">评论</text>
						</view>
						<view class="grace-items grace-rows-li grace-center" @click.stop="editSocialMain(item.id,index)">
							<image src="../../../static/dianzan.png" mode="widthFix"></image>
							<block v-if="item.likeCount==0">
								<text class="li-text">点赞</text>
							</block>
							<block v-else="">
								<text class="li-text">{{item.likeCount}}</text>
							</block>
						</view>
					</view>
				</view>
			</view>
			<view class="entry-mulu" @click="goSubmit()">
				<image src="../../../static/fabuquanzi.png"></image>
			</view>	
		</view>

		<!-- 话题列表 -->
		<view v-if="cateCurrentIndex==1">
			<!-- 搜索条 -->
			<view class="searchBox">
				<view class="inputBox">
					<input type="text" placeholder="搜索话题" v-model="keyword" @confirm="doSearch()" placeholder-class="placeholder-class"
					 confirm-type="search">
				</view>
				<view class="searchBtn" @tap="doSearch()">搜索</view>
			</view>
			<!-- 文章内容区 -->
			<view class="grace-news-list" style="width:94%; padding:5px 3%;">
				<view v-for="(item, index) in topicAll" :key="index" @click="goTopicDetail(item.id)">
					<view class="grace-news-list-items grace-bg">
						<image :src="serverUrl+item.cover" class="grace-news-list-img grace-list-imgs-l" ></image>
						<view class="grace-news-list-title">
							<view class="grace-news-list-title-main main-topic">#{{item.title}}#</view>
							<text class="grace-news-list-title-desc grace-text-overflow">{{item.description}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align:center;" v-show="dataShow">数据为空</view>				
	</view>
</template>
<script>
	var page = 1,
		cate = '0';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		data() {
			return {
				serverUrl: this.serverUrl,
				top: 0,
				//分类信息
				categories: [{
						name: '动态',
						cateid: '0'
					},
					{
						name: '话题',
						cateid: '1'
					}
				],
				// 当前选择的分类
				cateCurrentIndex: 0,
				// 演示文章数据
				socialMain: [],
				topicAll: [],
				dataShow: false
			};
		}, 
		onLoad: function() {
			// #ifdef H5
			this.top = '44px';
			// #endif
			page = 1;
			this.cateCurrentIndex = 0;
			this.socialMain = [];
			this.getSocialMain();
			
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			page = 1;
			if(cate==0){
				this.socialMain = [];
				this.getSocialMain();
			}else if(cate==1){
				this.topicAll = [];
				this.getSocialTopic();				
			}
		},
		// 加载更多
		onReachBottom: function() {
			if(cate==0){
				this.getSocialMain();
			}else if(cate==1){
				this.getSocialTopic();				
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			goSubmit() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "/pages/social/submit/submit"
					})
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/social/submit/submit"
					})
				}
			},
			goHomePage(id,cert){
				if(cert==1){
					uni.navigateTo({
						url: '/pages/my/home-page/home-page?id='+id
					})
				}
			},
			goShareDetail(type,id,title) {
				let obj = {
					id: id,
					type: type,
					title: title
				}
				if(type=='xwzx') {
					uni.navigateTo({
						url: "/pages/news/detail/detail?id=" + id
					})
				}else {
					uni.navigateTo({
						url: "/pages/search/detail/detail?obj=" + encodeURIComponent(JSON.stringify(obj))
					})
				}
				
			},			
			goSocialDetail(id) {
				uni.navigateTo({
					url: "/pages/social/detail/detail?id=" + id,
				})
			},
			goTopicDetail(id) {
				uni.navigateTo({
					url: "../../social/topic-detail/topic-detail?id=" + id,
				})
			},
			// 数据和分页是模拟的实际也是这样写
			getSocialMain: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'user-api/getSocialMain',
					data: {
						pageNumber: page,
						pageSize: 5,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.socialMain.length < 1) {
									this.dataShow = true;
								}else{
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							}else{
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.length; i++) {
								var datobj = {
									id: r.data.data[i].id,
									author: r.data.data[i].memberName,
									memberId: r.data.data[i].memberId,
									memberCertification: r.data.data[i].memberCertification,
									avatarImg: r.data.data[i].memberAvatarImg,
									place: r.data.data[i].createLocation,
									images: r.data.data[i].submitImages == null ? "" : r.data.data[i].submitImages.split(";"),
									timehour: r.data.data[i].createTime.substring(11),
									timeday: r.data.data[i].createTime.substring(0, 10),
									likeCount: r.data.data[i].likeCount,
									topicId:r.data.data[i].topicId,
									topicTitle: r.data.data[i].topicTitle == undefined ? "" : "#" + r.data.data[i].topicTitle + "#",
									content: r.data.data[i].content,
									resource: r.data.data[i].resource,									
								};
								this.socialMain = this.socialMain.concat(datobj);
							}
							page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			getSocialTopic: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'user-api/getSocialTopic',
					data: {
						title: this.keyword==undefined?"":this.keyword,
						pageNumber: page,
						pageSize: 10,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.topicAll.length < 1) {
									this.dataShow = true;
								}else{
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							}else{
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.length; i++) {
								var datobj = {
									id: r.data.data[i].id,
									cover: r.data.data[i].cover == null||r.data.data[i].cover == "" ? "../../../static/zhaopian.png" : r.data.data[i].cover,
									title: r.data.data[i].title,
									description: r.data.data[i].description,
								};
								this.topicAll = this.topicAll.concat(datobj);
							}
							page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			},	
			editSocialMain(id,index){
				var num = 1;//1或-1
				uni.request({
					url: this.serverUrl + 'user-api/editSocialMain',
					data: {
						id: id,
						likeCount: num
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.socialMain[index].likeCount = this.socialMain[index].likeCount+num;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					}
				});				
			},
			doSearch(){
				page = 1;
				this.topicAll = [];
				this.getSocialTopic();
			},	
			tabChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cateid;
				this.cateCurrentIndex = index;
				// 动态替换内容
				this.content = this.categories[index].name;


				// 读取分类数据
				cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
				// 重置分页及数据 
				page = 1;
				if (cate == 0) {
					this.socialMain = [];
					this.getSocialMain();
				} else if (cate == 1) {
					this.topicAll = [];
					this.getSocialTopic();
				}
				
			},
			//预览图片#
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var index = e.target.dataset.index;
				var imgList = [];
				for(var i=0;i<this.socialMain[index].images.length;i++){
					imgList.push(this.serverUrl+this.socialMain[index].images[i]);
				}
				uni.previewImage({
					current: current,
					urls: imgList
				})
			},
		}
	}
</script>
<style>
	/* 分段器头部 fixed 定位 */
	.fixedit {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
	}

	.grace-tab-title view {
		padding: 0 6px;
		margin: 0 8px;
		line-height: 35px;
	}

	.grace-news-list-imgs {
		/* max-height: 68px; */
		overflow: hidden;
	}

	.grace-tab-current {
		border-bottom: 5rpx solid #417dc9 !important;
		color: #000;
		font-weight: bold;
		font-size: 45upx;
	}

	.grace-tab-title view {
		padding: 0 6px;
		margin: 0 10px;
		line-height: 35px;
	}

	.grace-news-list-two {
		justify-content:flex-start;
		width: 100%;
		display: flex;
		margin: 18upx 0;
		align-items: flex-start;
	}

	.grace-news-list-two image {
		width: 33%;
		margin: 0 1%;
	}

	.grace-news-list-title-main {
		font-size: 30upx;
	}

	.social-banner {
		width: 100%;
		display: flex;
		margin-bottom: 15upx;
	}

	.social-banner .social-banner-img {
		width: 90upx;
		height: 90upx;
		border-radius: 20upx;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.social-banner .social-banner-img image {
		width: 100%;
		border-radius: 20upx;
	}

	.social-banner .social-banner-text {
		margin-top: 5upx;
	}

	.social-banner .social-banner-text .text-nickname {
		font-size: 34upx;
		color: #2F2F2F;
		font-weight: bold;
	}

	.social-banner .social-banner-text .text-description {
		color: #6b6b6b;
		font-size: 28upx;
	}

	.entry-mulu {
		position: fixed;
		bottom: 5%;
		right: 8%;
		z-index: 888;
		/* background: #ff9900; */
		width: 90upx;
		height: 90upx;
		/* border-radius: 40px;
		box-shadow: 2px 2px 2px #888888;
		opacity:0.7 ; */
	}

	.entry-mulu image {
		padding: 8upx;
		width: 90upx;
		height: 90upx;
	}

	.grace-rows {
		margin-top: -10upx;
	}

	.grace-rows view image {
		width: 50upx;
		height: 50upx;
	}

	.grace-rows-li {
		height: 60upx;
		line-height: 60upx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.grace-rows-li .li-text {
		padding-left: 10upx;
	}

	.main-topic {
		color: #1874CD;
		margin: 0 4upx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.grace-news-list-items {
		background-color: #F6F7F8;
	}

	.grace-news-list-items .grace-news-list-img {
		width: 120upx;
		border-radius: 5upx;
	}

	.searchBox {
		width: 95%;
		background-color: rgb(242, 242, 242);
		padding: 7.5px 2.5%;
		display: flex;
		justify-content: space-between;
	}

	.searchBox .inputBox {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.searchBox .searchBtn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 14px;
		color: #fff;
		background-color: #417dc9;
		border-radius: 30px;
	}

	.searchBox .inputBox>input {
		width: 100%;
		height: 30px;
		font-size: 30upx;
		border: 0;
		border-radius: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.placeholder-class {
		color: #9e9e9e;
	}
	
	.grace-news-list-title-desc{
		margin-top:0upx; 
	}
	
	.grace-news-list-items {
		margin-bottom: 15upx;
	}
	
	.grace-news-list-img{
		height: 125upx;
		width: 165upx;
	}
	
	.grace-bg {
		background-color: #fff;
	}
	
	.grace-text-overflow {
		text-overflow:ellipsis;
	}
	
</style>
